

<template>
	<!--	<div :style={height:`600px`,overflow:`auto`}>-->
	<!--	<div :style="{ height: zheight+ 'px' , overflow: 'auto' }">-->
	<div :style='{ height: `calc(100vh)`}' class='zpage'>
		<el-card class='box-card' :body-style="{padding:'2px 8px'}" shadow='never'>
			<template #header>
				<div class='zjustify'>
					<div>
						<div style='line-height: 32px'>点位数据</div>
					</div>
					<div>
						<el-button type='info' @click='pageClose()' plain>关 闭</el-button>
					</div>
				</div>
			</template>
			<div style='margin-top: 8px;margin-bottom: 8px'>
			
                <div class="plcTag-container">
		<el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
			<el-form :model="queryParams" ref="queryForm" :inline="true">
			<el-row :gutter="35">
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
              <el-form-item label="点位号">
              <el-input v-model="queryParams.name" clearable placeholder="请输入名称、点位、编号"/>
              </el-form-item>
              </el-col>
             
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20 search-actions">
         
          <el-button icon="ele-Refresh" @click="() => queryParams = {}"> 重置 </el-button>
		  <el-button type="primary" plain icon="ele-Search" @click="openWritePlcTag" > 写入 </el-button>
          <el-button type="primary" plain icon="ele-Search" @click="handleQuery" > 查询 </el-button>
		  
        
          
          </el-col>
      </el-row>
      </el-form>
		</el-card>
		<el-card shadow="hover" style="margin-top: 8px">
			<el-table
				:data="tableData"
				style="width: 100%"
				v-loading="loading"
				tooltip-effect="light"
				row-key="id"
				border="">
				<el-table-column type="index" label="序号" width="55" align="center" fixed="" />
				 <el-table-column prop="name" label="名称" fixed="" show-overflow-tooltip="" />
				 <el-table-column prop="tagNum" label="点位号" fixed="" show-overflow-tooltip="" />
				 <el-table-column prop="tagProperty" label="点位名称" fixed="" show-overflow-tooltip="" />
				 <el-table-column prop="address" label="地址" fixed="" show-overflow-tooltip="" />
				 <el-table-column prop="dataTypeName" label="数据类型" fixed="" show-overflow-tooltip="" />
				
				 <el-table-column prop="dataLength" label="数据长度" fixed="" show-overflow-tooltip="" />
				 
				 
				 <el-table-column  label="读写" >
			      <template #default="scope">
			        <el-tag
			          :type="scope.row.readWrite === 2 ? 'success' : 'info'"
			          disable-transitions >{{ scope.row.readWrite==0?"只读":"读写" }}
					</el-tag>
			      </template>
			    </el-table-column>
				 <el-table-column prop="readBlock" label="块" fixed="" show-overflow-tooltip="" />
                 <el-table-column prop="value" label="值" fixed="" show-overflow-tooltip="" />
                 <el-table-column prop="oldValue" label="旧值" fixed="" show-overflow-tooltip="" />
                 <el-table-column prop="readTime" label="读取时间" fixed="" show-overflow-tooltip="" />
                 <el-table-column prop="readChangeTime" label="变化时间" fixed="" show-overflow-tooltip="" />
				
				
                 
				
			</el-table>
			<el-pagination
				v-model:currentPage="tableParams.page"
				v-model:page-size="tableParams.pageSize"
				:total="tableParams.total"
				:page-sizes="[20, 50, 100]"
				small=""
				background=""
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				layout="total, sizes, prev, pager, next, jumper"
	/>

	<writeDialog
			    ref="writeDialogRef"
			    title="点位写入"
			    @reloadTable="handleQuery"
      />
		
		</el-card>
	</div>
			</div>


		</el-card>
	</div>
</template>
<script lang='ts'>
export default { name: 'plcTagView' };
</script>

<script lang='ts' setup>
import {  reactive, ref } from 'vue';

import { useRoute } from 'vue-router';
import { NextLoading } from '/@/utils/loading';
import { ElMessage, FormInstance } from 'element-plus';
import { auth } from '/@/utils/authFunction';
import { getPlcTagPageDataList } from '/@/api/main/equipTag';
import writeDialog from '/@/views/main/equipTag/component/writeTagDialog.vue'

const writeDialogRef = ref();
const loading = ref(false);
const tableData = ref<any>([]);
const route = useRoute();
const queryParams = ref<any>
	({});
	const tableParams = ref({
	page: 1,
	pageSize: 20,
	total: 0,
	});
	const editPlcTagTitle = ref("");

const state = reactive({
	
	params: { path: '', query: '' },
	
});


	// 查询操作
	const handleQuery = async () => {
	loading.value = true;
	var res = await getPlcTagPageDataList(Object.assign(queryParams.value, tableParams.value));
	tableData.value = res.data.result?.items ?? [];
	tableParams.value.total = res.data.result?.total;
	loading.value = false;
};

// 改变页面容量
const handleSizeChange = (val: number) => {
  tableParams.value.pageSize = val;
  handleQuery();
};

// 改变页码序号
const handleCurrentChange = (val: number) => {
  tableParams.value.page = val;
  handleQuery();
};

const viewInitx = async (state: any, route: any) => {
	
	state.params = <any>route;
    queryParams.value.equipId = state.params.query?.id;
    queryParams.value.protobufType = state.params.query?.protobufType;
	
	if (queryParams.value.equipId) {
        handleQuery();
		
	}
};

const openWritePlcTag=()=>{

	writeDialogRef.value.openDialog({equipId:queryParams.value.equipId,protobufType:queryParams.value.protobufType});

};



const pageClose=()=>{
    window.close();
}



NextLoading.done();
	viewInitx(state, route);


</script>
<style scoped>
.zpage {
	overflow: auto;
}

</style>
